<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>p2p网贷平台</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<link href="css/common.css" rel="stylesheet" />
<link href="css/register.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="script/jquery.min.js"></script>
<script type="text/javascript" src="script/common.js"></script>
<script type="text/javascript" src="script/axios.min.js"></script>
<script type="text/javascript" src="script/moment.js"></script>
<script type="text/javascript" src="script/vue.js"></script>
<script type="text/javascript" src="script/md5.js"></script>
<!--引入 element-ui 的样式，-->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 必须先引入vue，  后使用element-ui -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<!-- 引入element 的组件库-->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<style scoped>
    .inputcss{
        width:351px;
        height: 36px;
    }
</style>
</head>
<body>
<header>
    <div class="header-top min-width" id="ap1">
        <div class="container fn-clear"> <strong class="fn-left">咨询热线：400-668-6698<span class="s-time">服务时间：9:00 - 18:00</span></strong>
            <ul class="header_contact">
                <li class="c_1"> <a class="ico_head_weixin" id="wx"></a>
                    <div class="ceng" id="weixin_xlgz" style="display: none;">
                        <div class="cnr"> <img src="images/code.png"> </div>
                        <b class="ar_up ar_top"></b> <b class="ar_up_in ar_top_in"></b> </div>
                </li>
                <li class="c_2"><a href="#" target="_blank" title="官方QQ" alt="官方QQ"><b class="ico_head_QQ"></b></a></li>
                <li class="c_4"><a href="#" target="_blank" title="新浪微博" alt="新浪微博"><b class="ico_head_sina"></b></a></li>
            </ul>
            <ul class="fn-right header-top-ul">
                <li> <a href="index.html" class="app">返回首页</a> </li>
                <li>
                    <div class="" v-if="this.user.fullName==''"><a href="iregister.html" class="c-orange" title="免费注册">免费注册</a></div>
                </li>
                <li>
                    <div class="" v-if="this.user.fullName==''"><a href="login.html" class="js-login" title="登录">登录</a></div>
                </li>
            </ul>
            <div v-if="this.user.fullName!=''" class=""><a>欢迎{{user.fullName}}登录   <a style="color: red" @click="outuser">[退出]</a></a></div>
        </div>
    </div>
    <div class="header min-width" id="ap2">
        <div class="container">
            <div class="fn-left logo"> <a class="" href="index.html"> <img src="images/logo.png"  title=""> </a> </div>
            <ul class="top-nav fn-clear">
                <li class="on"> <a href="index.html">首页</a> </li>
                <li> <a href="list.html" v-if="this.type==null||this.type==1">我要投资</a> </li>
                <li> <a href="borrow.html" v-if="this.type==null||this.type==0">我要借款</a> </li>
                <li> <a href="帮助中心.html">安全保障</a> </li>
                <li class="top-nav-safe" v-if="this.type!=null"> <a href="个人中心首页.html">我的账户</a> </li>
                <li> <a href="公司简介.html">关于我们</a> </li>
            </ul>
        </div>
    </div>
</header>
<!-- end banner -->
<div class="bor_con_wper">
    <div class="bor_con px1200">
        <div class="bor_detail">
            <div class="bor_detail_box">
                <div class="bor_det_one clearfix pt30 pb30" id="app">
                    <!--借款信息表单-->
                    <!--借款信息表单-->
                    <el-card class="box-card">
                        <!--表单-->
                        <el-form :model="loaninfo" :rules="rules" ref="searchForm" class="demo-form-inline" >
                            <el-row><h1 style="color: red ;font-size: 50px" >新增借款</h1></el-row>
                            <el-row>
                                <el-col :span="8">
                                    <el-form-item label="标名" prop="bidName" label-width="100px">
                                        <el-input class="inputcss" v-model="loaninfo.bidName" placeholder="请输入名称" autocomplete="off"></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="8">
                                    <el-form-item label="风险等级" prop="riskLev" label-width="100px">
                                        <el-select class="inputcss" v-model="loaninfo.riskLev" placeholder="请选择">
                                            <el-option label="极低" value="0"></el-option>
                                            <el-option label="较低" value="1"></el-option>
                                            <el-option label="中等" value="2"></el-option>
                                            <el-option label="中高" value="3"></el-option>
                                            <el-option label="高" value="4"></el-option>
                                        </el-select>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="8">
                                    <el-form-item label="借款方" label-width="100px">
                                        <el-input style="width: 200px" v-model="cususer.fullName"></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row>
                                <el-col :span="8">
                                    <el-form-item label="借款总金额" prop="totalAmount" label-width="100px">
                                        <el-input class="inputcss" v-model.number="loaninfo.totalAmount" placeholder="请输入500-5000000的整数" type="number" autocomplete="off"></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="8">
                                    <el-form-item label="年利率" prop="interest" label-width="100px">
                                        <el-input class="inputcss" v-model.number="loaninfo.interest" placeholder="请输入1-24之间的数，保留两位小数" autocomplete="off"></el-input>%
                                    </el-form-item>
                                </el-col>
                                <el-col :span="8">
                                    <el-form-item label="还款方式" prop="repayType" label-width="100px">
                                        <el-select v-model="loaninfo.repayType" placeholder="请选择">
                                            <el-option label="一次性还款" value="0"></el-option>
                                            <el-option label="等额本金" value="1"></el-option>
                                            <el-option label="等额本息" value="2"></el-option>
                                        </el-select>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row>
                                <el-col :span="8">
                                    <el-form-item label="期限类型" prop="termType" label-width="100px">
                                        <el-radio v-model="loaninfo.termType" @click="getDw()" label="1">月</el-radio>
                                        <el-radio v-model="loaninfo.termType" @click="getDw()" label="0">天</el-radio>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="8">
                                    <el-form-item label="借款期限" prop="trem" label-width="100px">
                                        <el-input class="inputcss" v-model.number="loaninfo.trem" type="number" autocomplete="off"></el-input>{{this.dw}}
                                    </el-form-item>
                                </el-col>
                                <el-col :span="8">
                                    <el-form-item label="资金用途" prop="useFund" label-width="100px">
                                        <el-select v-model="loaninfo.useFund" placeholder="请选择">
                                            <el-option label="短期周转" value="短期周转"></el-option>
                                            <el-option label="生意周转" value="生意周转"></el-option>
                                            <el-option label="购物消费" value="购物消费"></el-option>
                                            <el-option label="长期周转" value="长期周转"></el-option>
                                            <el-option label="其它用途" value="其它用途"></el-option>
                                        </el-select>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row>
                                <el-col :span="8">
                                    <el-form-item label="借款管理费月率" prop="manageRate" label-width="100px">
                                        <el-input class="inputcss" v-model.number="loaninfo.manageRate" placeholder="请输入1-24之间的数，保留两位小数" type="number" autocomplete="off"></el-input>%
                                    </el-form-item>
                                </el-col>
                                <el-col :span="8">
                                    <el-form-item label="逾期罚息利率" prop="fineRate" label-width="100px">
                                        <el-input class="inputcss" v-model.number="loaninfo.fineRate" placeholder="请输入1-24之间的数，保留两位小数" type="number" autocomplete="off"></el-input>%
                                    </el-form-item>
                                </el-col>
                                <el-col :span="8">
                                    <el-form-item label="借款类型" prop="loanType" label-width="100px">
                                        <el-select v-model="loaninfo.loanType" placeholder="请选择">
                                            <el-option label="新增" value="0"></el-option>
                                            <el-option label="续贷" value="1"></el-option>
                                            <el-option label="资产处理" value="2"></el-option>
                                        </el-select>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row>
                                <el-col :span="8">
                                    <el-form-item label="还款来源" prop="repaySouce" label-width="100px">
                                        <el-input class="inputcss" v-model="loaninfo.repaySouce" autocomplete="off">%</el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-divider></el-divider>
                            <el-row><h1 style="color: red;font-size: 50px">担保信息</h1></el-row>
                            <el-row>
                                <el-col :span="12">
                                    <el-form-item label="是否担保">
                                        <el-radio v-model="loaninfo.isGrt" label="0">否</el-radio>
                                        <el-radio v-model="loaninfo.isGrt" label="1">是</el-radio>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="12">
                                    <el-form-item label="担保机构">
                                        <el-select v-model="mginfo.grtId" placeholder="请选择">
                                            <el-option
                                                    v-for="item in grtlist"
                                                    :key="item.id"
                                                    :label="item.fullName"
                                                    :value="item.id">
                                            </el-option>
                                        </el-select>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row>
                                <el-col :span="12">
                                    <el-form-item label="抵押类型">
                                        <el-radio v-model="mginfo.type" label="0">无</el-radio>
                                        <el-radio v-model="mginfo.type" label="1">房抵</el-radio>
                                        <el-radio v-model="mginfo.type" label="2">车抵</el-radio>
                                        <el-radio v-model="mginfo.type" label="3">民品抵</el-radio>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="12">
                                    <el-form-item label="担保抵押材料">
                                        <el-upload
                                                action="/api/finance-service-user/borrower/uploadDanbaoImg"
                                                list-type="picture-card"
                                                :on-preview="handlePictureCardPreview"
                                                :on-success="danhandleAvatarSuccess"
                                                :on-remove="handleRemove">
                                            <i class="el-icon-plus"></i>
                                        </el-upload>
                                        <el-dialog :visible.sync="dialogVisible">
                                            <img width="100%" :src="dialogImageUrl" alt="">
                                        </el-dialog>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-divider></el-divider><!--分割线-->
                            <el-row><h1 style="color: red ;font-size: 50px">抵押材料</h1></el-row>
                            <el-row>
                                <el-col :span="24">
                                    <el-form-item label="上传借款资料">
                                        <el-upload
                                                action="/api/finance-service-user/borrower/uploadJiekuanImg"
                                                list-type="picture-card"
                                                :on-preview="handlePictureCardPreview"
                                                :on-success="dihandleAvatarSuccess"
                                                :on-remove="handleRemove">
                                            <i class="el-icon-plus"></i>
                                        </el-upload>
                                        <el-dialog :visible.sync="dialogVisible">
                                            <img width="100%" :src="dialogImageUrl" alt="">
                                        </el-dialog>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-divider></el-divider>
                            <el-row>
                                <el-col>
                                    <el-button @click="addOne(1)" type="primary">提交审核</el-button>
                                    <el-button @click="addOne(0)" type="info">保存</el-button>
                                </el-col>
                            </el-row>
                        </el-form>
                    </el-card>
                    <!--借款人列表-->
                    <el-dialog title="选择借款人" :visible.sync="dialogTableVisible">
                        <el-form :model="findForm">
                            <el-row>
                                <el-col :span="8">
                                    <el-form-item label="借款人" >
                                        <el-input v-model="findForm.fullName"  autocomplete="off"></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="8">
                                    <el-button size="mini" type="primary" @click="getBorrower()">查询</el-button>
                                </el-col>
                            </el-row>
                        </el-form>
                    </el-dialog>
            </div>
        </div>
    </div>
</div>
</body>
<script>
    new Vue({
        el:"#app",
        data:{
            loaninfo:{},
            name:'',
                mginfo:{},
            grtlist:[],
                page:{
                pagenum:0,
                    pagesize:5
            },
            res:{},
            pathlist:[],
                total:0,
                dw:'月',//期限天数
                dialogImageUrl: '',
                dialogVisible: false,//
                grtJG:null,//担保机构
                grtIds:"",//担保材料
                ckType:true,//默认成立计息
                borList:[],//借款人列表
                dialogTableVisible:false,//借款人列表
                delpath:'',
                searchForm:{
                loaninfo:{},
                mginfo:{},
                pathlist:[]
            },
            findForm:{},
            cususer:{
                fullName:''
            },
            rules: {
                bidName: [
                    { required: true, message: '请输入', trigger: 'blur' }
                ],
                    riskLev: [
                    { required: true, message: '请选择', trigger: 'change' }
                ],
                    interest: [
                    {required: true, message: '请输入', trigger: 'blur' },
                    {type: 'number', min: 0,max: 24 , required: true, message: '输入不合理', trigger: 'change' }
                ],
                    totalAmount: [
                    {required: true, message: '请输入', trigger: 'blur' },
                    {type: 'number', min: 500,max: 5000000, required: true, message: '输入不合理', trigger: 'change' }
                ],
                    termType: [
                    { required: true, message: '请选择', trigger: 'change' }
                ],
                    trem: [
                    {required: true, message: '请输入', trigger: 'blur' },
                    {type: 'number', min: 0,max: 999 , required: true, message: '输入不合理', trigger: 'change' }
                ],
                    ckType:[
                    { required: true, message: '请选择', trigger: 'change' }
                ],
                    repayType: [
                    { required: true, message: '请选择', trigger: 'change' }
                ],
                    manageRate: [
                    {required: true, message: '请输入', trigger: 'blur' },
                    {type: 'number', min: 0,max: 24 , required: true, message: '输入不合理', trigger: 'change' }
                ],
                    fineRate: [
                    {required: true, message: '请输入', trigger: 'blur' },
                    {type: 'number', min: 0,max: 24 , required: true, message: '输入不合理', trigger: 'change' }
                ],
                    loanType: [
                    { required: true, message: '请选择', trigger: 'change' }
                ],
                    loanResIds: [
                    { required: true, message: '请上传', trigger: 'change' }
                ]
            }
        },
        methods: {
            findgrt:function(){
                axios.get("/api/finance-service-borrowing/guarantee/findgrt").then(
                    (res)=>{
                        if (res.data.success) {
                            this.grtlist=res.data.result;
                        } else {
                            this.$message.error(res.data.message);
                        }
                    }
                );
            },
            dihandleAvatarSuccess:function(res,file){
                this.pathlist.push({name:file.response.result});
                this.res.resName="抵押信息";
                this.res.resType=1;
                this.res.ext=file.response.result;
                this.res.resPath=file.url;
                axios.post("/api/finance-service-borrowing/ebankres/addpic/",this.res).then(
                    (res)=>{
                        if (res.data.success) {
                            this.$message({
                                message: res.data.message,
                                type: "success"
                            })
                        } else {
                            this.$message.error(res.data.message);
                        }
                    }
                );
            },
            danhandleAvatarSuccess:function(res,file){
                this.pathlist.push({name:file.response.result});
                this.res.resName="担保信息";
                this.res.resType=0;
                this.res.ext=file.response.result;
                this.res.resPath=file.url;
                axios.post("/api/finance-service-borrowing/ebankres/addpic",this.res).then(
                    (res)=>{
                        if (res.data.success) {
                            this.$message({
                                message: res.data.message,
                                type: "success"
                            })
                        } else {
                            this.$message.error(res.data.message);
                        }
                    }
                );
            },
            getDw(){
                debugger
                //获取期限的单位
                let ck=this.searchForm.termType;
                if(ck==1){
                    this.dw="月"
                }else{
                    this.dw="天"
                }
            },
            getBorrower:function(){
                axios.post("/api/finance-service-user/borrower/getBorrower/"+this.page.pagenum+"/"+this.page.pagesize,this.findForm).then((res)=>{
                        this.dialogTableVisible=true;
                        this.borList = res.data.result.list;
                        this.total = res.data.result.total;
                    }
                )
            },
            handleRemove(file, fileList) {
                console.log(file, fileList);
                this.delpath=file.response.result;
                axios.get("/api/finance-service-borrowing/ebankres/delpic/"+this.delpath).then(
                    (res)=>{
                        if (res.data.success) {
                            this.$message({
                                message: res.data.message,
                                type: "success"
                            })
                        } else {
                            this.$message.error(res.data.message);
                        }
                    }
                );

            },
            handlePictureCardPreview(file) {
                debugger
                this.dialogImageUrl = file.url;
                this.dialogVisible = true;
            },
            addOne(ck){
                this.loaninfo.status=ck;
                this.searchForm.loaninfo=this.loaninfo;
                this.searchForm.mginfo=this.mginfo;
                this.searchForm.pathlist=this.pathlist;
                debugger
                this.$refs['searchForm'].validate((valid) => {
                    if (!valid) {
                        return
                    }else{
                        axios.post("/api/finance-service-borrowing/loan/Addloan",this.searchForm).then((res) => {
                            if (res.data.success) {
                                this.$message({
                                    message: res.data.message,
                                    type: "success"
                                })
                                window.location.href="index.html"
                            } else {
                                this.$message.error(res.data.message);
                            }
                        });
                    }
                });
            },
        },
        mounted() {
            this.cususer=JSON.parse(sessionStorage.getItem("cususer")); //=JSON.parse()字符串转json对象 ，JSON。stringify（）对象转字符串
            this.loaninfo.borrowerId=this.cususer.id;
            this.findgrt();
        }
    });
    new Vue({
        el:"#ap1",
        data:{
            user:{fullName:''},
        },
        methods:{
            outuser:function () {
                sessionStorage.removeItem("type");
                sessionStorage.removeItem("cususer");
                window.location.reload();
            }
        },
        mounted(){
            this.user=JSON.parse(sessionStorage.getItem("cususer"));
        }
    });
    new Vue({
        el:"#ap2",
        data:{
            type:'',
        },
        methods:{

        },
        mounted(){
            this.type=sessionStorage.getItem("type");
        }
    });
</script>
</html>
